<template>
  <div>
    <div class="index">
      <div class="imgBox">
        <img src="/profilePhoto.png" class="index-img" :class="{'index-img-mouse': isActive}" @mouseover="mouseIn()" @mouseout="mouseOut()">
      </div>
      <div class="index-text">
        <p class="index-name">柳江南</p>
        <p class="index-slogan">曾经沧海难为水 除却巫山不是云</p>
        <img src="/QRCode.jpg" class="QRCode">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      isActive: false
    }
  },
  methods: {
    mouseIn () {
      this.isActive = true
    },
    mouseOut () {
      this.isActive = false
    }
  }
}
</script>

<style lang='stylus' scoped>
  .index
    color #b8b8c2
    transition: all 0.2s ease
    .imgBox
      display flex
      flex-direction column-reverse
      height 16rem
      .index-img
        margin 0 auto
        width 9.38rem
        margin-bottom 0rem
        transition: all 0.2s ease
      .index-img-mouse
        margin-bottom 1rem
        transition: all 0.2s ease
    .index-text
      .index-name
        font-weight bold
        margin-bottom 0rem
        margin-top 0.83rem
        letter-spacing 1rem
        font-size 2.3rem
      .index-slogan
        font-size 1.25rem
      .QRCode
        margin-top 5rem
        width 6.25rem
</style>
